<template>
  <div>
    <el-tag
    v-for="(item,index) in tabslist"
    :key="index"
    :closable="item.menuname !='首页' "
    :effect="$route.name === item.menuname ?'dark' :'plain' " 
    size="small" 
    style="margin-right: 10px;" 
    @close="handleClose(item,index)"
    @click="gotoLink(item)"
    >
    {{ item.menuname }}
  </el-tag>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
export default {
  name:'BreadcrumbTag',
  data() {
    return {
    }
  },
  computed:{
    ...mapState(['tabslist'])
  },
  mounted(){
     console.log(this.$route);
  },
  methods: {
    ...mapMutations(['ClearTag']),
    //点击跳转
    gotoLink(item){
       this.$router.push(item.url)
    },
    //点击删除
    handleClose(item,index){
        this.ClearTag(item)
        const length = this.tabslist.length
        //删除之后跳转到前一个页面
        if(item.menuname != this.$route.name){
            return
        }
        if(index == length){
            this.$router.push(this.tabslist[index -1].url)
        }else{
            this.$router.push(this.tabslist[index].url)
        }

    }
  },
}
</script>
<style lang='scss' scoped>
.el-tag{
  cursor: pointer;
}
</style>